<template>
    <n-modal
        :mask-closable="false"
        :close-on-esc="false"
        title="查看"
        :show="show"
        preset="card"
        @close="close"
        :on-after-enter="init"
        :on-after-leave="destroy"
        style="width: 800px;"
    >
        <n-form
            label-width="auto"
            label-placement="left"
        >
            <n-grid :cols="2" x-gap="2">
                <n-form-item-grid-item :span="1" label="编号" show-require-mark>
                    <n-input v-model:value="form.id"/>
                </n-form-item-grid-item>
                <n-form-item-grid-item :span="1" label="业务编号" show-require-mark>
                    <n-input v-model:value="form.bizId"/>
                </n-form-item-grid-item>
                <n-form-item-grid-item :span="2" label="类型" show-require-mark>
                    <n-input v-model:value="form.type"/>
                </n-form-item-grid-item>
                <n-form-item-grid-item :span="2" label="表名称">
                    <n-input v-model:value="form.tableName"/>
                </n-form-item-grid-item>
                <n-form-item-grid-item :span="1" label="创建人">
                    <n-radio-group v-model:value="form.creator">
                        <n-radio :label="item.name" :value="item.value" v-for="item in codeStore.getDict(Dict.Status)"/>
                    </n-radio-group>
                </n-form-item-grid-item>
                <n-form-item-grid-item :span="1" label="创建时间">
                    <n-input v-model:value="form.gmtCreate" style="width: 100%;"/>
                </n-form-item-grid-item>
                <n-form-item-grid-item :span="2" label="请求参数">
                    <n-input type="textarea" v-model:value="form.objectJson"/>
                </n-form-item-grid-item>
            </n-grid>
        </n-form>
        <template #footer>
            <n-space justify="end">
                <n-button @click="close">关闭</n-button>
            </n-space>
        </template>
    </n-modal>
</template>
<script lang="ts" setup>
import { reactive, toRefs, PropType } from 'vue'
import { getLog } from '@/api/system/log'
import { useCodeStore } from '@/store/modules/code'
import { Dict } from '@/enums'

const codeStore = useCodeStore()

const state = reactive({
    form: {} as Log
})

const {
    form
} = toRefs(state)

const props = defineProps({
    show: {
        type: Boolean
    },
    row: {
        type: Object as PropType<Log>,
        required: true
    }
})

const emits = defineEmits<{
    (e: 'handleCloseOnClick'): void
}>()

const init = async () => {
    if(Object.keys(props.row).length == 0) return
    const { data } = await getLog(props.row.id)
    state.form = data
}


const close = () => {
    emits('handleCloseOnClick')
}

const destroy = () => {
    state.form = {} as Log
}

</script>